<template>
	<view class="main">
		<view class="item">
			<view class="left">
				<image :src="formData.avatar ? BASE_URL + formData.avatar : '/static/logo1.jpg'" mode="aspectFill"></image>
			</view>
			<view class="right" @click="upload">
				<view class="txt">上传头像</view>
			</view>
		</view>

		<view class="item">
			<view class="left">
				<input type="text" v-model="formData.nickName" placeholder="请输入昵称" />
			</view>
			<view class="right">
				<view class="icon">
					<image src="/static/ri.png" mode=""></image>
				</view>
			</view>
		</view>
		<view class="item">
			<view class="left">
				<input type="number" maxlength="11" v-model="formData.phonenumber" placeholder="请输入手机号码" />
			</view>
			<view class="right">
				<view class="icon">
					<image src="/static/ri.png" mode=""></image>
				</view>
			</view>
		</view>
		<view class="item">
			<view class="left">
				<input type="text" v-model="formData.platenumber" placeholder="请输入车牌号" />
			</view>
			<view class="right">
				<view class="icon">
					<image src="/static/ri.png" mode=""></image>
				</view>
			</view>
		</view>
	</view>

	<view class="btn-box">
		<view class="btn" @click="submit">保存</view>
	</view>
</template>

<script setup>
import { reactive, ref } from 'vue';
import { uploadImage } from '@/utils/util.js';
import { updateUserInfo } from '@/api/apiList.js';
import { getUserInfo } from '@/api/apiList.js';
import { onLoad } from '@dcloudio/uni-app';
import { BASE_URL } from '@/config/base.js';

const formData = reactive({
	nickName: '',
	phonenumber: '',
	platenumber: '',
	avatar: ''
});

let userInfo = ref({});
const getUser = async () => {
	const res = await getUserInfo();
	if (res.code == 200) {
		userInfo.value = res.data;
		formData.nickName = userInfo.value.nickName;
		formData.phonenumber = userInfo.value.phonenumber;
		formData.avatar = userInfo.value.avatar;
		formData.platenumber = userInfo.value.platenumber;
	}
};

onLoad(() => {
	getUser();
});

const upload = async () => {
	const res = await uploadImage();
	formData.avatar = res;
	console.log(res, 'resavarar');
};

// 修改用户信息
const submit = async () => {
	const res = await updateUserInfo(formData);
	if (res.code == 200) {
		uni.showToast({
			title: res.msg,
			icon: 'none'
		});
		setTimeout(() => {
			// uni.navigateBack();
			uni.reLaunch({
				url: '/pages/index/index'
			});
		}, 1000);
	} else {
		uni.showToast({
			title: res.msg,
			icon: 'none'
		});
	}
};
</script>

<style lang="scss" scoped>
.btn-box {
	position: fixed;
	bottom: 100rpx;
	left: 0;
	right: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	.btn {
		background: linear-gradient(0deg, #f49a5e 0%, #fe4f56 100%);
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 20rpx 320rpx;
		color: #fff;
		border-radius: 16rpx;
	}
}
.main {
	padding: 30rpx;
	.item:last-child {
		margin-bottom: 0;
	}
	.item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30rpx 40rpx;
		background: #ffffff;
		border-radius: 16rpx;
		margin-bottom: 24rpx;
		.left {
			input {
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 30rpx;
				color: #000000;
				background-color: #fff;
			}
			image {
				width: 98rpx;
				height: 98rpx;
				border-radius: 50%;
			}
		}
		.right {
			.icon {
				image {
					width: 23rpx;
					height: 23rpx;
				}
			}
			.txt {
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 30rpx;
				color: #000000;
				line-height: 24rpx;
			}
		}
	}
}
</style>
